<template>
  <div style="width: 100%">
    <a-card :bordered="false" class="card-area">
      <a-row>
        <a-col :span="12">
          <a-divider orientation="left">可用数据模型</a-divider>
          <a-radio-group v-model="modelId" @change="modelChange" style="width: 100%">
            <a-list :grid="{ column: 2, gutter: 8, xs: 1, sm: 1, md: 1, lg: 2, xl: 3, xxl: 4 }" :data-source="models">
              <a-list-item slot="renderItem" slot-scope="item, index">
                <a-card size="small">
                  <a-radio :value="item.modelId">
                    {{item.modelName}}
                  </a-radio>
                </a-card>
              </a-list-item>
            </a-list>
          </a-radio-group>
        </a-col>
        <a-col :span="1"></a-col>
        <a-col :span="11">
          <a-row>
          <a-divider orientation="left">筛选条件</a-divider>
          </a-row>
          <a-row>
            <a-form-model
              ref="dynamicValidateForm"
              :model="dynamicValidateForm"
              v-bind="formItemLayoutWithOutLabel"
            >
              <a-form-model-item
                v-for="(domain, index) in dynamicValidateForm.domains"
                :key="domain.key"
                v-bind="formItemLayout"
                :label="''"
                :prop="'domains.' + index + '.value'"
                :rules="{
          required: true,
          message: '条件不可为空',
          trigger: 'blur',
        }"
              >
                <a-select placeholder="请选择条件" style="width: 30%; margin-right: 8px" v-model="domain.field" :labelInValue="true">
                  <a-select-option v-for="d in currModelFieldList" :key="d.value">
                    {{ d.label }}
                  </a-select-option>
                </a-select>
                <a-select style="width: 15%; margin-right: 8px" v-model="domain.operator" :labelInValue="true">
                  <a-select-option key="equal" value="=">等于</a-select-option>
                  <a-select-option key="like" value="like">包含</a-select-option>
                  <a-select-option key="gt" value=">">大于</a-select-option>
                  <a-select-option key="ge" value=">=">大于等于</a-select-option>
                  <a-select-option key="lt" value="<">小于</a-select-option>
                  <a-select-option key="le" value="<=">小于等于</a-select-option>
                </a-select>
                <a-input
                  v-model="domain.value"
                  placeholder="请输入条件值"
                  style="width: 40%; margin-right: 8px"
                />
                <a-icon
                  v-if="dynamicValidateForm.domains.length > 0"
                  class="dynamic-delete-button"
                  type="minus-circle-o"
                  :disabled="dynamicValidateForm.domains.length === 0"
                  @click="removeDomain(domain)"
                />
              </a-form-model-item>
              <a-form-model-item v-bind="formItemLayoutWithOutLabel">
                <a-button type="dashed" style="width: 60%" @click="addDomain">
                  <a-icon type="plus" /> 添加查询条件
                </a-button>
              </a-form-model-item>
              <a-form-model-item v-bind="formItemLayoutWithOutLabel">
                <a-button type="primary" style="margin-left: 10px" html-type="submit" @click="submitForm('dynamicValidateForm')">
                  查询
                </a-button>
                <a-button style="margin-left: 10px" @click="resetForm('dynamicValidateForm')">
                  重置
                </a-button>
              </a-form-model-item>
            </a-form-model>
          </a-row>
        </a-col>
      </a-row>
      <a-row>
        <a-divider orientation="left">查询结果</a-divider>
        <a-tabs v-model="activeKey" hide-add type="editable-card" @edit="onEdit">
          <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
            <BizDataQueryRs :paramModelId="pane.modelId" :conditions="pane.conditions"></BizDataQueryRs>
          </a-tab-pane>
        </a-tabs>
      </a-row>
    </a-card>
  </div>
</template>
<script>
import BizDataQueryRs from './BizDataQueryRs'

export default {
  name: 'BizDataQuery',
  components: {BizDataQueryRs},
  data () {
    return {
      modelId: '',
      models: [],
      currModelFieldList: [],
      activeKey: '',
      panes: [],
      newTabIndex: 0,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 20, offset: 4 }
        }
      },
      dynamicValidateForm: {
        domains: []
      }
    }
  },
  mounted: function () {
    this.$get('bizModel/allAvailableModels').then((r) => {
      for (let objKey in r.data) {
        this.models.push({
          modelId: objKey,
          modelName: r.data[objKey]
        })
      }
    })
  },
  methods: {
    modelChange () {
      this.$get('bizModel/indexedFieldsInModel/' + this.modelId).then((r) => {
        this.currModelFieldList = r.data
      })
    },
    submitForm (formName) {
      if (this.modelId === '') {
        this.$message.error('请选择一个数据模型')
        return
      }
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.add()
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    removeDomain (item) {
      let index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain () {
      if (this.modelId === '') {
        this.$message.error('请选择一个数据模型')
        return
      }

      this.dynamicValidateForm.domains.push({
        value: '',
        operator: {key: '=', label: '等于'},
        key: Date.now()
      })
    },
    callback (key) {
      console.log(key)
    },
    onEdit (targetKey, action) {
      this[action](targetKey)
    },
    add () {
      const panes = this.panes
      const activeKey = `queryResult${this.newTabIndex++}`
      const currModelName = this.models.filter(item => item.modelId === this.modelId)[0].modelName
      const title = `${this.newTabIndex}-` + currModelName
      panes.push({
        title: title,
        key: activeKey,
        modelId: this.modelId,
        conditions: [...this.dynamicValidateForm.domains]
      })
      this.panes = panes
      this.activeKey = activeKey
    },
    remove (targetKey) {
      let activeKey = this.activeKey
      let lastIndex
      this.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1
        }
      })
      const panes = this.panes.filter(pane => pane.key !== targetKey)
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          activeKey = panes[lastIndex].key
        } else {
          activeKey = panes[0].key
        }
      }
      this.panes = panes
      this.activeKey = activeKey
    }
  }
}
</script>
<style scoped>
  .dynamic-delete-button {
    cursor: pointer;
    position: relative;
    top: 4px;
    font-size: 24px;
    color: #999;
    transition: all 0.3s;
  }
  .dynamic-delete-button:hover {
    color: #777;
  }
  .dynamic-delete-button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
</style>
